<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>

<body>
    <div id="app">
        <div v-if="ref1===10">我是div我显示了</div>
        <button @click="ref1++">点我</button><br>
        <div v-if="ref2 === true">我是第二个div</div>
        <button @click="ref2 = !ref2">第二个</button>
        <button @click="ref3--" :disabled="ref3 <= 1">-</button>
        {{ ref3 }}
        <button @click="ref3++" :disabled="ref3 >= 10">+</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            //对一个按钮点击十次后，让某个div显示出来
            let ref1 = ref(1)
            //点击按钮，  如果div是显示状态，就把div隐藏，否则把div显示出来。
            let ref2 = ref(false)
            //实现一个步进器 （购物车的加减）. 如果数量等于1时，减少按钮变成灰色不可点击状态，如果数量大于等于10时，增加按钮变成不可点击状态
            let ref3 = ref(1)
            return {
                ref1,
                ref2,
                ref3,
            }
        }
    }).mount('#app');
</script>

</html>